<template>
  <div class="welfare">
    <header  @click.stop.passive="runToLink('http://wxjx.unisk.cn/pages/2018/wxjx/broadband/bindPhoneOrNet.html')">
    <div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    </div>
</header>
    <ul>
      <li ref="tab1" @click.stop.passive="runToLink('https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf71dfa4539d2f215&redirect_uri=http%3A%2F%2Fwx1.unisk.cn%2FweixinLinksucaiController.do%3Flink%26id%3Dff8080815ccf00a0015cec2c2d5c606f%26jwid%3Dgh_a1d4f56be7af&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect')"></li>
      <li ref="tab2" @click.stop.passive="runToLink('http://wo24.udotek.com/')"></li>
      <li ref="tab3" @click.stop.passive="runToLink('http://wx1.unisk.cn/weixinLinksucaiController.do?link&id=ff808081630221220163ab2b355f4378&jwid=gh_a1d4f56be7af')"></li>
    </ul>
  </div>
</template>
<script>
import Swiper from 'swiper';

export default {
  data() {
    return {
      key: ''
    }
  },
  created() {
    setTimeout(() => {
      var mySwiper = new Swiper('.swiper-container"', {
        autoplay: true,
        loop: true
      });
    }, 300)
  },
  mounted() {
    this.$nextTick(() => {
      this.initAnimated();
    })
  },
  methods: {
    //跳转
    runToLink(url) {
      location.href = url;
    },
    initAnimated() {


      // tabs的动画
      Velocity(this.$refs.tab1,
        {
          left: '0rem',
          opacity: 1
        },
        {
          duration: '1500',
          easing: [250, 15],
          delay: false
        })
      // tab2
      Velocity(this.$refs.tab2,
        {
          right: '0rem',
          opacity: 1
        },
        {
          duration: '1500',
          easing: [250, 15],
          delay: 500
        })
      // tab3
      Velocity(this.$refs.tab3,
        {
          left: '0rem',
          opacity: 1
        },
        {
          duration: '1500',
          easing: [250, 15],
          delay: 1000
        })

    }
  },
}
</script>

<style lang="less" scoped>
@import "../../../node_modules/swiper/dist/css/swiper.css";
.welfare {
  header {
    position: relative;
    opacity: 0;
    top: -100px;
    width: 640px;
    height: 229px;
    background: url("../../assets/img/bind.png") no-repeat;
    background-size: 640px 229px;
  }
  ul {
    overflow: hidden;
    li {
      margin: 15px auto;
      position: relative;
      opacity: 0;
    }
    li:nth-child(1) {
      left: -640px;
      width: 640px;
      height: 240px;
      background: url("../../assets/img/welfare-btns.png") no-repeat 0 -10px;
      background-size: 640px 758px;
    }
    li:nth-child(2) {
      right: -640px;
      width: 640px;
      height: 240px;
      background: url("../../assets/img/welfare-btns.png") no-repeat 0 -2.65rem;
      background-size: 640px 758px;
    }
    li:nth-child(3) {
      left: -640px;
      width: 640px;
      height: 240px;
      background: url("../../assets/img/welfare-btns.png") no-repeat 0 -5.2rem;
      background-size: 640px 758px;
    }
  }
}
</style>
